<template>
  <page-header-wrapper>
    <a-card>
      <p class="info">违约</p>
      <p class="ml-14 text-base">基本信息</p>
      <div class="ml-16 my-4 grid grid-cols-4">
        <div>项目地址：{{ form.addr }}</div>
        <div>客户名称：{{ form.clientName }}</div>
        <div>放款总额：{{ moneyType(form.drawDowns) }}</div>
        <div>利息：{{ moneyType(form.interests) }}</div>
      </div>
      <div class="ml-16 mb-4 grid grid-cols-4">
        <div>资本化贷款限额费：{{ moneyType(form.limitFees) }}</div>
        <div>总欠金额：{{ moneyType(form.totalArrears) }}</div>
        <div>违约利率：{{ `${form.defaultRate}%(${form.defaultRateType})` }}</div>
      </div>
      <div class="flex justify-between">
        <p class="ml-14 text-lg clear-both">违约明细</p>
        <changeCalc @update="getList" v-action:add />
      </div>
      <a-table rowKey="id" :columns="columns" :data-source="data" :pagination="pagination" :scroll="{ y: 400 }">
        <span slot="startdata" slot-scope="startdata"> {{ humanizeDate(startdata) }}</span>
        <span slot="enddata" slot-scope="enddata"> {{ humanizeDate(enddata) }}</span>
        <span slot="defaultInterest" slot-scope="defaultInterest"> {{ minMoney(defaultInterest) }}</span>
        <span slot="defaultContract" slot-scope="_, record">
          <switchContract :record="record" @update="getData" />
        </span>
        <span slot="operation" slot-scope="_, record">
          <changeCalc :record="record" @update="getList" class="mr-2" v-action:update />
          <a-divider type="vertical" v-if="Archive == 0" />
          <a-popconfirm title="确定删除吗" @confirm="() => onDelete(record.id)">
            <a href="javascript:;" v-action:delete v-if="Archive == 0">删除</a>
          </a-popconfirm>
        </span>
      </a-table>
    </a-card>
  </page-header-wrapper>
</template>
<script>
import { getCalc, getDfault, deleteDfault, getDetailList } from '@/api/common'
import { rateTypes, calcTypes } from '@/dict'
import moment from 'moment'
const columns = [
  // { dataIndex: 'id', key: 'id', title: '编号' },
  { dataIndex: 'detail', key: 'detail', title: '违约类型' },
  { dataIndex: 'startdata', key: 'startdata', title: '开始时间', scopedSlots: { customRender: 'startdata' } },
  { dataIndex: 'enddata', key: 'enddata', title: '完成时间', scopedSlots: { customRender: 'enddata' } },
  {
    dataIndex: 'defaultInterest',
    key: 'defaultInterest',
    title: '利息',
    scopedSlots: { customRender: 'defaultInterest' }
  },
  {
    dataIndex: 'defaultContract',
    key: 'defaultContract',
    title: '违约执行',
    scopedSlots: { customRender: 'defaultContract' }
  }
  // { dataIndex: 'operation', key: 'operation', title: '操作', scopedSlots: { customRender: 'operation' } }
]
export default {
  name: 'calcOperation',
  components: {
    changeCalc: () => import('./changecalc.vue'),
    switchContract: () => import('./switchContract.vue')
  },
  data() {
    return {
      data: [],
      form: {
        addr: '',
        clientName: '',
        drawDowns: '',
        interests: '',
        limitFees: '',
        totalArrears: '',
        defaultRate: '',
        defaultRateType: ''
      },
      Archive: 0,
      current: 1,
      pagination: {
        total: 1,
        pageSize: 10,
        onChange: this.getList
      }
    }
  },
  computed: {
    columns() {
      if (this.$auth('defaultCalc.update') || this.$auth('defaultCalc.delete')) {
        return [
          ...columns,
          {
            dataIndex: 'operation',
            key: 'operation',
            title: '操作',
            scopedSlots: { customRender: 'operation' }
          }
        ]
      } else {
        return columns
      }
    }
  },
  mounted() {
    this.getData()
    this.getList()
  },
  methods: {
    humanizeDate(v) {
      if (v) {
        return moment(v * 1000).format('YYYY-MM-DD') || '--'
      } else {
        return '-'
      }
    },
    moneyType(v) {
      return `${v}`.replace(/\B(?=(\d{3})+(?!\d))/g, ',')
    },
    minMoney(v) {
      v = Number(v).toFixed(2)
      return `${v}`.replace(/\B(?=(\d{3})+(?!\d))/g, ',')
    },
    async getData(page = 1) {
      const id = this.$route.query.id
      const r = await getDetailList(id)
      this.Archive = r.result.data.Archive
      this.current = page
      var _form = {
        page,
        limit: this.pagination.pageSize,
        projectId: id
      }
      const res = await getCalc(_form)
      this.form = res.result.data.list[0]
      this.form.defaultRateType = rateTypes.find(el => el.value == this.form.defaultRateType)?.text
    },
    async getList(page = 1) {
      const id = this.$route.query.id
      const _form = {
        page,
        limit: this.pagination.pageSize,
        projectId: id
      }
      const res = await getDfault(_form)
      this.pagination.total = res.result.data.total
      const data = res.result.data.list
      data.forEach(el => {
        el.detail = calcTypes.find(e => e.value == el.detail)?.text
      })
      // console.log(data)
      this.data = data
    },
    async onDelete(id) {
      await deleteDfault(id)
      this.$message.info('已删除')
      this.getList(this.current)
    }
  }
}
</script>
<style lang="css" scoped>
.info {
  border-left: 2px solid #1890ff;
  padding-left: 10px;
  font-size: 25px;
  margin-left: 50px;
}
</style>
